<template>
  <a-modal title="标题" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="hideModal"
    :maskClosable="false" destroyOnClose width="720px" style="overflow: hidden;"
    :bodyStyle="{maxHeight:'520px',overflow:'auto'}">
    <a-spin :spinning="spinning">
      <a-form-model :model='formData' :rules='rules' ref='myForm' :style="{width:'100%'}" layout='horizontal'
        v-bind='{
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    }' :colon='true' labelAlign='right'>
        <a-row style='height: 100%'>
          <a-col :span='24'>
            <a-form-model-item label='名称' prop='title' v-bind='{}'>
              <a-input v-model='formData.title' placeholder='' :allowClear='true' size='default'
                :disabled='false'></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='索引' prop='field' v-bind='{}'>
              <a-input v-model='formData.field' placeholder='' :allowClear='true' size='default'
                :disabled='false'></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='开启排序' prop='sorter' v-bind='{}'>
              <a-radio-group v-model='formData.sorter' button-style='outline' size='default'
                :disabled='false'>
                <a-radio v-for='(opt,idx) in sorter_options' :key='idx' :value='opt.value'>
                  {{opt.label}}
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
         <a-col :span='24'>
            <a-form-model-item label='隐藏' prop='hidden' v-bind='{}'>
              <a-radio-group v-model='formData.hidden' button-style='outline' size='default'
                :disabled='false'>
                <a-radio v-for='(opt,idx) in hidden_options' :key='idx' :value='opt.value'>
                  {{opt.label}}
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='对齐方式' prop='align' v-bind='{}'>
              <a-radio-group v-model='formData.align' button-style='outline' size='default' :disabled='false'>
                <a-radio v-for='(opt,idx) in align_options' :key='idx' :value='opt.value'>
                  {{opt.label}}
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span='24'>
            <a-form-model-item label='宽' prop='width' v-bind='{}'>
              <a-input-number style='width:100%' v-model='formData.width' placeholder='' size='default'
                :disabled='false' decimalSeparator='.' :precision='0' step='1' :max='999999999' :min='0'>
              </a-input-number>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      idx: '',
      spinning: true,
      confirmLoading: false,
      visible: false,
      defaultFormData: {
        field: '',
        title: '',
        sorter: '0',
        align: 'left',
        width: '100',
        hidden: '0'
      },
      formData: {},
      rules: {
        field: [{
          required: true,
          message: '索引不能为空',
          trigger: 'blur'
        }, {
          max: 20,
          message: '索引最大长度不能大于20',
          trigger: 'blur'
        }],
        title: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }, {
          max: 10,
          message: '名称最大长度不能大于10',
          trigger: 'blur'
        }],
        sorter: [{
          required: true,
          message: '开启排序不能为空',
          trigger: 'change'
        }],
        align: [{
          required: true,
          message: '对齐方式不能为空',
          trigger: 'change'
        }],
        hidden: [{
          required: true,
          message: '隐藏不能为空',
          trigger: 'change'
        }],
        width: [{
          required: true,
          message: '宽不能为空',
          trigger: 'blur'
        }]
      },
      sorter_options: [{
        'label': '是',
        'value': '1'
      }, {
        'label': '否',
        'value': '0'
      }],
      align_options: [{
        'label': '左',
        'value': 'left'
      }, {
        'label': '中',
        'value': 'center'
      }, {
        'label': '右',
        'value': 'right'
      }],
      hidden_options: [{
        'label': '是',
        'value': '1'
      }, {
        'label': '否',
        'value': '0'
      }]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    showModal(item, idx) {
      this.idx = idx === undefined ? -1 : idx
      this.visible = true
      this.formData = Object.assign({}, this.defaultFormData)
      if (item) {
        this.formData = Object.assign({}, {
          field: item.field,
          title: item.title,
          sorter: item.sorter ? '1' : '0',
          align: item.align,
          width: item.width,
          hidden: item.hidden ? '1' : '0'
        })
      }
      this.spinning = false
    },
    hideModal() {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          this.confirmLoading = false
          console.log('error')
        } else {
          // TODO 提交表单
          this.$emit('success', {
            field: this.formData.field,
            title: this.formData.title,
            sorter: this.formData.sorter === '1',
            align: this.formData.align,
            width: this.formData.width,
            hidden: this.formData.hidden === '1'
          }, this.idx)
          this.confirmLoading = false
          this.hideModal()
        }
      })
    }
  }
}

</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper+.ant-checkbox-wrapper {
  margin-left: 0px;
}

</style>
